<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/login/css/style.css">
    <link rel="icon" href="static/login/image/code.png">
</head>
<body>

<div class="login-main">
    <header class="layui-elip">后台登录</header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <input type="text" name="username" id="username" required lay-verify="required" placeholder="帐号" autocomplete="off"
                   class="layui-input" value="admin">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="password" id="password" required lay-verify="required" placeholder="密码" autocomplete="off"
                   class="layui-input" value="admin">
        </div>
        <div class="layui-input-inline login-btn">
            <button type="submit" class="layui-btn" lay-submit lay-filter="login">登录</button>
        </div>
        <hr/>
        <!--<div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-primary">QQ登录</button>
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal">微信登录</button>
        </div>-->
        {{/*<p><a href="javascript:;" class="fl">立即注册</a><a href="javascript:;" class="fr">忘记密码？</a></p>*/}}
    </form>
</div>


<script src="static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form'], function () {
        // 操作对象
        var form = layui.form;
        form.on('submit(login)', function(data){
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            //登录
            //调用后台登录验证的方法
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            var username = data.field.username;
            var password = data.field.password;

            xmlhttp.onreadystatechange = state_Change;
            xmlhttp.open("POST", "/login", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("username=" + username + "&password=" + password);

            function state_Change() {
                if (xmlhttp.readyState == 4) {// 4 = "loaded"
                    if (xmlhttp.status == 200) {// 200 = "OK"
                        var result = JSON.parse(xmlhttp.response);
                        //输出弹窗 重定向到个人中心
                        layer.open({
                            title: result.Title
                            , content: result.Msg,
                            yes: function(index){
                                if (result.Code==1){
                                    window.location.href="/admin";
                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                                }else{
                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                                }
                            }
                        });
                    } else {
                        layer.open({
                            title: '服务器无响应'
                            , content: "服务器开小差啦！！"
                        });
                    }
                }
            }
            return false;
        })
    });
</script>
</body>
</html>